<template>
	<view class="container">
		<u-navbar title="活动记录" leftIconColor="#fff"  placeholder :autoBack="true"></u-navbar>

		<view class="pad-32">
			
			<view class="pad-16 bg-white radius20 centerY mar-bottom-30" v-for="(item,index) in list"
				@click="hanldePopup(item.material_info)">
				<image v-if="item.is_lucky ==1" class="goods-cover radius20" mode="aspectFill"
					:src="item.gift_info.goods[0].goods_info.cover">
				</image>
				<image class="goods-cover radius20" v-else src="../../static/image/cry.png"></image>
				
				<view class="flex-w betweenX mar-left-32">
					<view class="betweenY info">
						<view class="font-w-600 font-32" v-if="item.is_lucky ==1">{{item.activity_name}}</view>
						<view class="font-w-600 font-32" v-else>
								<view v-if="item.type == 'compose'">合成失败</view>
								<view v-else>未中奖</view>
						</view>
						<view class="color-grey mar-top-30 font-20">
							{{ $u.timeFormat(item.created_at, 'yyyy-mm-dd hh:MM:ss') }}
						</view>
					</view>
					<u-icon name="arrow-right" size="12"></u-icon>
				</view>
				
				
			</view>
		</view>
		
		
		
		<u-empty v-if="list.length == 0" text=" " icon="../../static/image/empty.png"></u-empty>
		<u-loadmore v-if="list.length > 0" :status="pageStatus" color="#df0007" iconColor="#df0007" />

		<!-- 弹窗 -->
		<u-popup :show="isPopup" mode="center" bgColor="transparent">
			<view class="u-popup-box">
				<view class="text-right pad-top-bottom-20">
					<image class="close" @click="isPopup = false" src="../../static/icon/close.png"></image>
				</view>
				<view class="bg-white pad-left-right-32 pad-top-72 pad-bottom-40 radius32">
					<view class="text-center">材料详情</view>
					<view class="modal">
						<view class="detailscon mar-top-32 centerY" v-for="item in materialList">
							<image class="list-image radius6" :src="item.goods_info.cover" mode="aspectFill"></image>
							<view class="centerY betweenX flex-w mar-left-20">
								<view>
									<view class="font-w-500 font-28">{{item.goods_info.name}}</view>
									<view class="font-20 color-grey mar-top-16">
										<text>#{{item.code}}</text>/<text>{{item.goods_info.build}}</text>
									</view>
								</view>
								<view class="font-28 color-grey">销毁</view>
							</view>
						</view>
					</view>
					<view @click="hanldeMyGoods"
						class="bg-theme mar-top-80 color-white radius50 text-center font-32 btn-style">去查看我的藏品</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// 接口地址
	import {
		coverLog
	} from '@/config/api.js'
	export default {
		data() {
			return {
				isPopup: false,
				page: 1,
				ps: 10,
				// 列表数据
				list: [],
				// 销毁数据
				materialList: [],
				// 加载中状态
				pageStatus: 'loadmore',
			}
		},
		onLoad(options) {
			this.type = options.type;
			this.activityId = options.id;
			this.getDataList();
		},
		// 上拉加载更懂
		onReachBottom() {
			if (this.pageData.next_page_url) {
				this.getDataList();
			}
		},
		methods: {
			// 打开销毁弹窗
			hanldePopup(item) {
				this.isPopup = true;
				this.materialList = item.goods;
			},
			// 获取列表
			getDataList() {
				this.pageStatus = 'loading';

				let post = {};
				if (this.type == 'draw') {
					post = {
						page: this.page,
						ps: this.ps,
						channel_id: this.activityId
					}
				} else {
					post = {
						page: this.page,
						ps: this.ps,
						activity_id: this.activityId
					}
				}
				
				coverLog(post).then(res => {
					this.pageStatus = 'loadmore';

					let {
						data
					} = res;
					this.pageData = data;
					this.page = data.current_page + 1;
					this.list = this.list.concat(data.data);
					// 没有更多了
					if (data.next_page_url == null) {
						this.pageStatus = 'nomore'
					}
				})
			},
			// 查看我的藏品
			hanldeMyGoods() {
				this.isPopup = false;
				uni.switchTab({
					url: '/pages/my/my'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		min-height: 100vh;

		::v-deep .u-navbar__content {
			background-image: url('../../static/image/my-bg.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-color: #f5f5f5;
		}

		.goods-cover {
			display: block;
			width: 166rpx;
			height: 166rpx;
		}

		.info {
			min-height: 120rpx;
		}

		.u-popup-box {
			width: 650rpx;


			.close {
				width: 48rpx;
				height: 48rpx;
			}

			.modal {
				overflow: hidden;
				overflow-y: scroll;
				max-height: 40vh;
			}

			.list-image {
				width: 84rpx;
				height: 84rpx;
			}

			.btn-style {
				height: 80rpx;
				line-height: 80rpx;
			}
		}
	}
</style>